<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Webkit Quirks</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-git.css" type="text/css"/>
    <script src="http://code.jquery.com/qunit/qunit-git.js"></script>
    <script src="qunit/connector.js"></script>
    <script type="text/javascript" src="qunit/runner.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/tiny_mce_loader.js"></script>
    <script type="text/javascript" src="js/dsl/dsl.js"></script>
    <script type="text/javascript" language="JavaScript" src="jsrobot/robot.js"></script>
    <script>
        var editor;

        QUnit.config.reorder = false;
        QUnit.config.autostart = false;

        module("Quirks Tests", {
                    autostart: false,
                    setup: function() {
                        window.queue = new dsl.Queue();
                    }
                });

        var defaultTableContent =
                "<p id='p'>p</p>" +
                        "<table>" +
                        "    <tbody>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='b'>b</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tbody>" +
                        "    <thead>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='a'>a</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </thead>" +
                        "    <tbody>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='c'>c</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    <tr>" +
                        "        <td>" +
                        "<p id='p'>p</p>" +
                        "<table>" +
                        "    <tbody>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='i'>i</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tbody>" +
                        "    <thead>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='h'>h</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </thead>" +
                        "    <tbody>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='j'>j</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='k'>k</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tbody>" +
                        "    <tfoot>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='m'>m</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tfoot>" +
                        "    <tbody>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='l'>l</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tbody>" +
                        "</table>" +
                        "<p id='g'>g</p>" +
                        "</td>" +
                        "        <td id='d'>d</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tbody>" +
                        "    <tfoot>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='f'>f</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tfoot>" +
                        "    <tbody>" +
                        "    <tr>" +
                        "        <td>z</td>" +
                        "        <td id='e'>e</td>" +
                        "        <td>z</td>" +
                        "    </tr>" +
                        "    </tbody>" +
                        "</table>" +
                        "<p id='g'>g</p>";

        asyncTest('tbody to tr', 1, function() {
            check('b', 40, 'c');
        });
        asyncTest('tr to tr', 1, function() {
            check('c', 40, 'd');
        });
        asyncTest('tr to tbody', 1, function() {
            check('d', 40, 'e');
        });
        asyncTest('tbody to tfoot', 1, function() {
            check('e', 40, 'f');
        });
        asyncTest('tfoot escaping down', 1, function() {
            check('f', 40, 'g');
        });
        asyncTest('thead to tbody', 1, function() {
            check('a', 40, 'b');
        });
        asyncTest('tfoot to tbody', 1, function() {
            check('f', 38, 'e');
        });
        asyncTest('tbody to thead', 1, function() {
            check('b', 38, 'a');
        });
        asyncTest('thead escaping up', 1, function() {
            check('a', 38, 'p');
        });
        asyncTest('nested tbody to tfoot', 1, function() {
            check('l', 40, 'm');
        });
        asyncTest('nested tfoot to tbody', 1, function() {
            check('m', 38, 'l');
        });
        asyncTest('nested tfoot to tbody', 1, function() {
            check('m', 38, 'l');
        });
        asyncTest('moving up around nested table', 1, function() {
            check('d', 38, 'c');
        });

        function check(nodeId, keyStroke, expectedId) {
            setSelection('#' + nodeId, 0);
            editor.focus();
            robot.type(keyStroke, false, getAssertFunction(expectedId), editor.getBody());
        }

        function getAssertFunction(expectedId) {
            return function() {
                var actual = editor.selection.getNode().id;
                equals(actual, expectedId);
                start();
            };
        }

        var initTinyFunction = function() {

            tinyMCE.init({
                        mode : "exact",
                        plugins: 'table',
                        elements : "elm1",
                        init_instance_callback : function(ed) {
                            editor = ed;
                            editor.setContent(defaultTableContent);
                        }
                    });
        }
    </script>
</head>
<body>


<h1 id="qunit-header">Webkit Quirks</h1>

<h2 id="qunit-banner"></h2>

<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="content">
    <textarea id="elm1" name="elm1"></textarea>

    <div>
        <a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent({format : 'raw'}));">[getRawContents]</a>
        <a href="javascript:alert(tinymce.EditorManager.get('elm1').getContent());">[getContents]</a>
    </div>
</div>
<script>
    initWhenTinyAndRobotAreReady(initTinyFunction);
</script>
</body>
</html>
